import React, { useState } from 'react'; // 导入React和useState
import { Table, Button, Modal, Form, Input, Space, message, Popconfirm, Card, Tag } from 'antd'; // 导入Ant Design组件
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons'; // 导入图标

// 初始员工数据
const initialEmployees = [
  { id: 1, name: '张三', position: '前端开发', department: '技术部', email: 'zhangsan@company.com', phone: '13800138001', status: '在职', remark: '优秀员工' },
  { id: 2, name: '李四', position: '后端开发', department: '技术部', email: 'lisi@company.com', phone: '13800138002', status: '在职', remark: '' },
  { id: 3, name: '王五', position: '产品经理', department: '市场部', email: 'wangwu@company.com', phone: '13800138003', status: '离职', remark: '' }
];

const EmployeeManagement = () => {
  // 员工列表
  const [employees, setEmployees] = useState(initialEmployees);
  // 控制模态框显示
  const [modalVisible, setModalVisible] = useState(false);
  // 当前编辑员工
  const [editing, setEditing] = useState(null);
  // 详情模态框显示
  const [detailVisible, setDetailVisible] = useState(false);
  // 当前详情员工
  const [detailEmployee, setDetailEmployee] = useState(null);
  // 表单实例
  const [form] = Form.useForm();

  // 打开新增员工模态框
  const handleAdd = () => {
    setEditing(null);
    form.resetFields();
    setModalVisible(true);
  };

  // 打开编辑员工模态框
  const handleEdit = (record) => {
    setEditing(record);
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  // 删除员工
  const handleDelete = (id) => {
    setEmployees(employees.filter(item => item.id !== id));
    message.success('删除成功');
  };

  // 查看员工详情
  const handleDetail = (record) => {
    setDetailEmployee(record);
    setDetailVisible(true);
  };

  // 提交表单
  const handleOk = () => {
    form.validateFields().then(values => {
      if (editing) {
        // 编辑员工
        setEmployees(employees.map(item => item.id === editing.id ? { ...item, ...values } : item));
        message.success('编辑成功');
      } else {
        // 新增员工
        const newItem = { id: Date.now(), ...values };
        setEmployees([...employees, newItem]);
        message.success('新增成功');
      }
      setModalVisible(false);
      form.resetFields();
    });
  };

  // 员工表格列
  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '职位', dataIndex: 'position', key: 'position' },
    { title: '部门', dataIndex: 'department', key: 'department' },
    { title: '邮箱', dataIndex: 'email', key: 'email' },
    { title: '手机号', dataIndex: 'phone', key: 'phone' },
    { title: '状态', dataIndex: 'status', key: 'status', render: (text) => <Tag color={text === '在职' ? 'green' : 'red'}>{text}</Tag> },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button icon={<EyeOutlined />} size="small" onClick={() => handleDetail(record)}>详情</Button>
          <Button icon={<EditOutlined />} size="small" onClick={() => handleEdit(record)}>编辑</Button>
          <Popconfirm title="确定删除该员工吗？" onConfirm={() => handleDelete(record.id)} okText="确定" cancelText="取消">
            <Button icon={<DeleteOutlined />} size="small" danger>删除</Button>
          </Popconfirm>
        </Space>
      )
    }
  ];

  return (
    <Card title="员工管理" bordered={false}> {/* 外层卡片 */}
      <Button type="primary" icon={<PlusOutlined />} style={{ marginBottom: 16 }} onClick={handleAdd}>新增员工</Button>
      <Table columns={columns} dataSource={employees} rowKey="id" pagination={false} />
      <Modal
        title={editing ? '编辑员工' : '新增员工'}
        open={modalVisible}
        onOk={handleOk}
        onCancel={() => setModalVisible(false)}
        destroyOnClose
      >
        <Form form={form} layout="vertical">
          <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}> 
            <Input placeholder="请输入姓名" />
          </Form.Item>
          <Form.Item name="position" label="职位" rules={[{ required: true, message: '请输入职位' }]}> 
            <Input placeholder="请输入职位" />
          </Form.Item>
          <Form.Item name="department" label="部门" rules={[{ required: true, message: '请输入部门' }]}> 
            <Input placeholder="请输入部门" />
          </Form.Item>
          <Form.Item name="email" label="邮箱" rules={[{ required: true, type: 'email', message: '请输入有效邮箱' }]}> 
            <Input placeholder="请输入邮箱" />
          </Form.Item>
          <Form.Item name="phone" label="手机号" rules={[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入有效手机号' }]}> 
            <Input placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item name="status" label="状态" rules={[{ required: true, message: '请输入状态' }]}> 
            <Input placeholder="请输入状态，如在职/离职" />
          </Form.Item>
          <Form.Item name="remark" label="备注"> 
            <Input placeholder="备注（可选）" />
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        title="员工详情"
        open={detailVisible}
        onOk={() => setDetailVisible(false)}
        onCancel={() => setDetailVisible(false)}
        footer={null}
      >
        {detailEmployee && (
          <div>
            <p><b>姓名：</b>{detailEmployee.name}</p>
            <p><b>职位：</b>{detailEmployee.position}</p>
            <p><b>部门：</b>{detailEmployee.department}</p>
            <p><b>邮箱：</b>{detailEmployee.email}</p>
            <p><b>手机号：</b>{detailEmployee.phone}</p>
            <p><b>状态：</b>{detailEmployee.status}</p>
            <p><b>备注：</b>{detailEmployee.remark}</p>
          </div>
        )}
      </Modal>
    </Card>
  );
};

export default EmployeeManagement; // 导出员工管理组件 